<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./swiper-bundle.min.css">
    <script src="./swiper-bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul li{
        list-style: none;
    }
     html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 100%;
        margin-top: 10px;
        border-radius: 15px;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    .sousuo{
        width: 300px;
        height: 20px;
        background: rgb(233, 230, 230);
        border: none;
        border: 1px solid #ccc;
        border-radius: 20px;
        color: rgb(140, 135, 135);
        margin-top: 20px;
        margin-left: 40px;
}

.box1 ul li{
    width: 300px;
    height: 20px;
    line-height: 20px;
    margin-top: 20px;
    margin-left: 40px;
}
.box2{
    width: 350px;
    height: 50px;
    text-align: center;
    background: rgb(222, 160, 160);
    line-height: 50px;
    margin-left: 15px;
    position: fixed;
    bottom: 0;
}
.box2 button{
    margin-left: 20px;
    margin-right: 20px;
    border: none;
    background: none;
}
.box22{
    width: 300px;
    height: 200px;
    background: papayawhip;
    display: none;


}
.box22 p{
    color: red;
    line-height: 40px;
}
.box22 button{
    margin-left: 60px;
    border: none;
}
.queding1{
    display: none;
}
.box3{
    display: none;
    margin-left: 100px;
}
.box3 ul li{
    width: 200px;
    height: 20px;
    margin-top: 20px;
}
.box3 ul{
    margin-top: 30px;
    margin-left: -20px;
}
.box3 p{
width: 100px;
height: 100px;
border-radius: 50%;
background: rgb(149, 145, 145);
}
/* 2 */
      
</style>
<body>
<div class="box1">
    <button class="sousuo">搜索</button>
 <!-- Swiper -->
 <div class="swiper mySwiper wrapper">
    <div class="swiper-wrapper" id="swiper-wrapper-1108803f4a9159980" aria-live="polite" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
    </div>
  </div>


<!-- 2 -->
  <div class="swiper MySwiper" id="ss" style="width: 350px;height:20px;">
    <div class="swiper-wrapper">
      <div class="swiper-slide">是发给你SG 如果S</div>
      <div class="swiper-slide">你SV凤凰网而发索尼大法 </div>
      <div class="swiper-slide">MSHBF客家话 会计法 </div>
    </div>
  </div>
        <ul>
            <li>典当借款</li>
            <li>卖掉变现</li>
            <li>鉴定评估</li>
            <li>续期赎回</li>
            <li>保管箱</li>
        </ul>
    </div>

   

<div class="box2"><button id="shouye">首页</button><button>流程</button><button>业务</button><button id="me">我</button></div>
<div class="box22">
    <p>微信提示</p>
    <p>此功能需要登录，请登录</p>
    <button>取消</button><button id="queding">确定</button>
</div>
<div class="queding1">
    <input type="text" class="plone" placeholder="请输入手机号"><br>
    <input type="password" class="pwd" placeholder="请输入密码"><a href="#" id="huoqu">找回密码</a><br>
    <button id="denglu">登录</button><br>
</div>
<div class="box3">
    <p></p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微信用户
    <ul>
        <li>个人资料</li>
        <li>收款方式</li>
        <li>联系地址</li>
        <li>宝贝</li>
        <li>合同</li>
        <li>咨询建议</li>
        <li>设置</li>
    </ul>
</div>
    <script>
$(function(){
    $("#shouye").click(function(){
        $('.box1').css({display:'block'})
        $(".box22").css({display:'none'})
        $(".queding1").css({display:'none'})
        $(".box3").css({display:'none'})


    })
})
$(function(){
    $("#me").click(function(){
        $('.box1').css({display:'none'})
        $(".box22").css({display:'block'})
        $(".queding1").css({display:'none'})

    })
    // 提示
    $(".box22").click(function(){
        $(".box22").css({display:'none'})

    })
    // 提示确定
    $("#queding").click(function(){
        $(".queding1").css({display:'block'})
   
    })
    $("#denglu").click(function(){
        $(".queding1").css({display:'none'})  
        $(".box3").css({display:'block'})
    })
    // $("#dueding").click(function(){

    // })
})

// 1
        var swiper = new Swiper(".mySwiper", {
        spaceBetween: 10,
        autoplay: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });   

// 2
      var swiper1 = new Swiper(".MySwiper", {
        direction: "vertical",
        autoplay: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });

// 轮播图接口
      $(function () {
            $.ajax({
                url: "http://47.94.4.201/index.php/index/index/getImgList",
                type: "GET",
                dataType: "json",
                success: function (e) {
                    console.log(e);
                    let num = ''
                    for (var i in e.data) {
                      
                        num +=
                            `<div class="swiper-slide" >
                                <img src="${e.data[i]}" alt="">
                            </div>
                            `
                    }
                    $("#swiper-wrapper-1108803f4a9159980").html(num)
                }
            })
        })

        // 获取验证码接口
          $(function () {
            $("#huoqu").click(function(){
                $.ajax({
                url: "http://47.94.4.201/index.php/index/index/getcode",
                type: "GET",
                dataType: "json",
                success: function (b) {
                   console.log(b)
                   let bb = ''
                    for (var i in b.msg) {   
                        bb +=
                            `${b.msg[i]} `
                    }
                    alert(bb)
                }
            }) 
            })
           
        })
 // 登录接口
//  $(function () {
//             $("#denglu").click(function(){
//                 $.ajax({
//                 url: "http://47.94.4.201/index.php/index/index/login",
//                 type: "POST",
//                 dataType: "json",
//                 // data: {
//                 //             username: '11',
//                 //             password:'22',
//                 //         },
//                 success: function (a) {
//                     console.log(a)
//                     let aa = ''
//                     for (var i in a.msg) {
                      
//                         aa +=
//                             `${a.msg[i]} `
//                     }
//                     alert(aa)
//                 }
//             }) 
//             })
           
//         })  

// 登录接口
$(function () {
            $("#denglu").click(function(){
                let name = $('.plone').val()
                let pwd = $('.pwd').val()
                new Promise ((resolve) => {
                    $.ajax({
                        url: "http://47.94.4.201/index.php/index/index/getcode",
                        type: "GET",
                        dataType: "json",
                        success: function (res) {
                            resolve(res.msg)
                        }
                    })
                }).then((res) => {
                    console.log(res)
                    $.ajax({
                        url: "http://47.94.4.201/index.php/index/index/login",
                        type: "POST",
                        dataType: "json",
                        data: {
                                vercode:res,
                                name:name,
                                pwd:pwd,
                                },
                        success: function (a) {
                            console.log(a)
                        }
                    })
                })
            
            })
           
        })  

    </script>
</body>
</html>